<template>
  <div>
    <div class="wrapper">
      <div class="serachBox">
        <div class="location" @click="() => $router.push('/area')">
          <i>
            <van-icon name="location-o" />
          </i>
          <span>
            {{areaMap.areaName}}
          </span>
        </div>
        <div class="search">
          <home-search :search_backgroud="'请输入搜索关键词'"></home-search>
        </div>
      </div>
      <home-swiper class="home-swiper" @itemClick="_toFunctionDetail" :swiperData="homeData.bannerList"></home-swiper>
      <div class="home-nav">
        <van-grid :border="false">
          <van-grid-item @click="toFunction(item)"
            v-for="(item, index) in function_list" :key="index"
            :icon="item.icon"
            :text="item.text"
          />
        </van-grid>
      </div>
      <div class="list-component">
        <div class="list-container" v-if="homeData.newHouseList">
          <div class="title" @click="() => $router.push('/newHouse')">
            <div class="left">
              楼盘推荐
            </div>
            <div class="right">
              更多
              <van-icon name="arrow" />
            </div>
          </div>
          <list-view ref="listView" :listData="homeData.newHouseList"></list-view>
        </div>
        <div class="list-container" v-if="homeData.oldHouseList">
          <div class="title" @click="() => $router.push('/secondHand')">
            <div class="left">
              二手房推荐
            </div>
            <div class="right">
              更多
              <van-icon name="arrow" />
            </div>
          </div>
          <list-view ref="listView" :listData="homeData.oldHouseList"></list-view>
        </div>
        <div class="list-container" v-if="homeData.rentHouseList">
          <div class="title" @click="() => $router.push('/rentHouse')">
            <div class="left">
              租房推荐
            </div>
            <div class="right">
              更多
              <van-icon name="arrow" />
            </div>
          </div>
          <list-view ref="listView" :listData="homeData.rentHouseList"></list-view>
        </div>
      </div>
      <!-- <mu-container ref="container" class="loadmore-content" style="overflow: hidden">
        <mu-load-more @refresh="refresh" :refreshing="refreshing" :loading="loading" @load="load">
          <div ref="goodsListBox">
            <list-view ref="listView" :listData="goods_list" @load="load"></list-view>
          </div>
        </mu-load-more>
      </mu-container> -->
    </div>
  </div>
</template>

<script>
import { HomeSearch, CategoryNav, HomeSwiper } from '@/views/home/components'
import { mineApi } from '@/api'
// import { toGoods } from '@/utils'
import ListView from '@/components/listview/listview'
import { summaryMixin } from '@/base/mixins/tableMix'
import { mapGetters } from 'vuex'
export default {
  components: {
    HomeSearch,
    CategoryNav,
    HomeSwiper,
    ListView
  },
  mixins: [summaryMixin],
  computed: {
    ...mapGetters([
      'areaMap',
      'token'
    ])
  },
  async created() {
    this.getTimes()
  },
  data() {
    return {
      showDialog: false,
      marking_list: [],
      homeData: {},
      goods_list: [],
      function_list: [
        {
          text: '新房',
          icon: require(`@/assets/images/hailang/c1.png`),
          url: '/newHouse'
        },
        {
          text: '二手房',
          icon: require(`@/assets/images/hailang/c2.png`),
          url: '/secondHand'
        },
        {
          text: '房屋出租',
          icon: require(`@/assets/images/hailang/c3.png`),
          url: '/rentHouse'
        },
        {
          text: '申请入驻',
          icon: require(`@/assets/images/hailang/c4.png`),
          url: '/detail/apply'
        }
      ]
    }
  },
  methods: {
    async getTimes() {
      this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true, // 禁用背景点击
        loadingType: 'spinner',
        message: '加载中'
      })
      const res = await mineApi.getHome({
        cityId: this.areaMap.code
      })
      if (res.code !== 200) return
      this.homeData = res.data
      this.$toast.clear()
    },
    _toFunctionDetail(item) {
      switch (item.bannerType) {
        case 1:
        case 2:
        case 3:
        case 4:
          this.$router.push('/detail/news-detail?id=' + item.targetId)
          break
        case 5:
        case 6:
        case 7:
          this.$router.push('/detail/index?id=' + item.targetId)
          break
        default:
          break
      }
      // toGoods(item, this)
    },
    toFunction(item) {
      this.$router.push(item.url)
    },
    async _getDataList(item) {
      if (item.blur) {
        const res = await mineApi.getHome()
        if (res.code) {
          return
        }
        return
      }
      return
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
  .wrapper {
    background-color: #fafafa;
    overflow: hidden;
    padding-top: 50px;
    font-size: 16px;
    .loadmore-content{
      padding: 0;
      margin: 0;
    }
    .serachBox{
      display: flex;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 9;
      background-color: #fff;
      align-items: center;
      padding: 5px 5px;
      justify-content: space-between;
      .location{
        font-size: 16px;
        flex: 1;
        display: flex;
        align-items: center;
        i{
          margin-right: 2px;
        }
      }
      .search{
        flex: 3;
      }
    }
    .home-container{
      position: relative;
      margin-top: 0px;
    }
    .list-component{
      .list-container{
        margin-top: 10px;
        background-color: #fff;
        padding: 10px 20px;
        .title{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 10px 0;
          border-bottom: 1px solid $color-border;
          .right{
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }

    }
  }
</style>
<style rel="stylesheet/scss" lang="scss">
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
  .home-nav{
    box-shadow: 2px 2px 5px $color-border;
    margin-bottom: 10px;
    background-color: #fafafa;
    .van-grid-item__icon{
      font-size: 44px;
    }
  }
</style>
